<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>涟漪特效按钮</title>
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="btn-box">
      <button>点赞</button>
      <button>关注</button>
      <button>收藏</button>
      <button>转发</button>
    </div>
    <script type="text/javascript">
      // 获取所有按钮对象
      const btns = document.querySelectorAll("button");
      // 循环所有按钮,并为每一个按钮添加点击事件
      btns.forEach((btn) => {
        btn.addEventListener("click", (e) => {
          // 创建span元素,并设置其位置为鼠标点击的位置
          let span = document.createElement("span");
          span.style.left = e.offsetX + "px";
          span.style.top = e.offsetY + "px";
          // 将span元素添加到按钮标签里
          btn.appendChild(span);
          // 1秒后删除span元素
          setTimeout(() => {
            span.remove();
          }, 1000);
        });
      });
    </script>
  </body>
</html>
